<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/">
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/themes/purple-passion.js"></script>
    <script src="/static/china.js"></script>
    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/assets/css/ie10-viewport-bug-workaround.css"
          rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/examples/dashboard/dashboard.css"
          rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/assets/js/ie8-responsive-file-warning.js"></script>
    <![endif]-->
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url_for('index') }}">返回</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="https://pyecharts.org/#/">Pyecharts</a></li>
                <li><a href="https://gitee.com/crisp0820">Gitee</a></li>
                {#            <li><a href="#">Help</a></li>#}
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="搜索">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="/dashboard">大数据岗位<span class="sr-only">(current)</span></a></li>
                <li><a href="/dataAnalysis">数据分析师岗位</a></li>
                <li><a href="/pm">数据产品经理岗位</a></li>
                <li><a href="/dm">数据挖掘工程师岗位</a></li>
                <li><a href="/sap">数据分析工程师岗位</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">大数据岗位</h1>

            <div class="row placeholders">

                <div class="panel panel-default">
                    <header class="panel-heading">
                        用条形图观察不同学历层次岗位需求数量情况
                    </header>
                    <div class="panel-body">
                        <div id="813d75bf30344937a60a7e3a7b771d81" class="chart-container"
                             style="height: 500px;width: 100%">

                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <header class="panel-heading">
                        岗位分布地图
                    </header>
                    <div class="panel-body">
                        <div id="main" class="chart-container"
                             style="height: 500px;width: 100%">

                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <header class="panel-heading">
                        各城市职位数量分布情况
                    </header>
                    <div class="panel-body">
                        <div id="c46a64f50bc542ebb6c00a247a08dab1" class="chart-container"
                             style="height: 500px;width: 100%">

                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <header class="panel-heading">
                        用箱型图观察不同学历层次的薪酬分布情况
                    </header>
                    <div class="panel-body">
                        <div>
                            <img src="/static/用箱图观察不同学历薪酬分布情况.png" style="height: 700px;width: 100%">
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <header class="panel-heading">
                        职位数量饼图
                    </header>
                    <div class="panel-body">
                        <div id="main2" class="chart-container"
                             style="height: 500px;width: 100%">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>

    option2 = {
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 259, name: '大数据开发工程师'},
                    {value: 139, name: '数据分析师'},
                    {value: 48, name: '数据开发工程师'},
                    {value: 41, name: '大数据架构师'},
                    {value: 41, name: '大数据工程师'},
                    {value: 35, name: '数据产品经理'},
                    {value: 20, name: '大数据运维工程师'},
                    {value: 24, name: '大数据产品经理'},
                    {value: 21, name: '数据工程师'},
                    {value: 21, name: '数据挖掘工程师'},
                    {value: 18, name: '高级数据分析师'},
                    {value: 18, name: '大数据分析师'},
                    {value: 12, name: '大数据分析工程师'},
                    {value: 11, name: '数据分析工程师'},
                    {value: 11, name: '高级大数据工程师'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('main2'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option2);

</script>

<script>
    function randomData() {
        return Math.round(Math.random() * 500);
    }

    var mydata = [
        {name: '北京', value: '100'}, {name: '天津', value: randomData()},
        {name: '上海', value: randomData()}, {name: '重庆', value: randomData()},
        {name: '河北', value: randomData()}, {name: '河南', value: randomData()},
        {name: '云南', value: randomData()}, {name: '辽宁', value: randomData()},
        {name: '黑龙江', value: randomData()}, {name: '湖南', value: randomData()},
        {name: '安徽', value: randomData()}, {name: '山东', value: randomData()},
        {name: '新疆', value: randomData()}, {name: '江苏', value: randomData()},
        {name: '浙江', value: randomData()}, {name: '江西', value: randomData()},
        {name: '湖北', value: randomData()}, {name: '广西', value: randomData()},
        {name: '甘肃', value: randomData()}, {name: '山西', value: randomData()},
        {name: '内蒙古', value: randomData()}, {name: '陕西', value: randomData()},
        {name: '吉林', value: randomData()}, {name: '福建', value: randomData()},
        {name: '贵州', value: randomData()}, {name: '广东', value: randomData()},
        {name: '青海', value: randomData()}, {name: '西藏', value: randomData()},
        {name: '四川', value: randomData()}, {name: '宁夏', value: randomData()},
        {name: '海南', value: randomData()}, {name: '台湾', value: randomData()},
        {name: '香港', value: randomData()}, {name: '澳门', value: randomData()}
    ];
    var optionMap = {
        backgroundColor: '#FFFFFF',
        title: {
            text: '全国地图大数据',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item'
        },

        //左侧小导航图标
        visualMap: {
            show: true,
            x: 'left',
            y: 'center',
            splitList: [
                {start: 500, end: 600}, {start: 400, end: 500},
                {start: 300, end: 400}, {start: 200, end: 300},
                {start: 100, end: 200}, {start: 0, end: 100},
            ],
            color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
        },

        //配置属性
        series: [{
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true  //省份名称
                },
                emphasis: {
                    show: false
                }
            },
            data: mydata  //数据
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(optionMap);

</script>
<script>
    var chart_c46a64f50bc542ebb6c00a247a08dab1 = echarts.init(
        document.getElementById('c46a64f50bc542ebb6c00a247a08dab1'), 'purple-passion', {renderer: 'canvas'});
    var option_c46a64f50bc542ebb6c00a247a08dab1 = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "series": [
            {
                "type": "bar",
                "name": "\u57ce\u5e02",
                "legendHoverLink": true,
                "data": [
                    4114,
                    3767,
                    3214,
                    2287,
                    1309,
                    525
                ],
                "showBackground": false,
                "barMinHeight": 0,
                "barCategoryGap": "20%",
                "barGap": "30%",
                "large": false,
                "largeThreshold": 400,
                "seriesLayoutBy": "column",
                "datasetIndex": 0,
                "clip": true,
                "zlevel": 0,
                "z": 2,
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "\u57ce\u5e02"
                ],
                "selected": {
                    "\u57ce\u5e02": true
                },
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "showContent": true,
            "alwaysShowContent": false,
            "showDelay": 0,
            "hideDelay": 100,
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0,
            "padding": 5
        },
        "xAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "\u4e0a\u6d77",
                    "\u6df1\u5733",
                    "\u5e7f\u5dde",
                    "\u5317\u4eac",
                    "\u6b66\u6c49",
                    "\u5f02\u5730\u62db\u8058"
                ]
            }
        ],
        "yAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "title": [
            {
                "text": "\u5404\u57ce\u5e02\u804c\u4f4d\u6570\u91cf\u5206\u5e03\u60c5\u51b5",
                "subtext": "\u67e5\u770b\u54ea\u4e2a\u804c\u4f4d\u6570\u91cf\u6392\u540d\u9760\u524d",
                "padding": 5,
                "itemGap": 10
            }
        ]
    };
    chart_c46a64f50bc542ebb6c00a247a08dab1.setOption(option_c46a64f50bc542ebb6c00a247a08dab1);
</script>

<script>
    var chart_813d75bf30344937a60a7e3a7b771d81 = echarts.init(
        document.getElementById('813d75bf30344937a60a7e3a7b771d81'), 'purple-passion', {renderer: 'canvas'});
    var option_813d75bf30344937a60a7e3a7b771d81 = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "series": [
            {
                "type": "bar",
                "name": "\u5b66\u5386",
                "legendHoverLink": true,
                "data": [
                    9317,
                    4599,
                    493,
                    420,
                    145,
                    135,
                    71,
                    18,
                    18
                ],
                "showBackground": false,
                "barMinHeight": 0,
                "barCategoryGap": "20%",
                "barGap": "30%",
                "large": false,
                "largeThreshold": 400,
                "seriesLayoutBy": "column",
                "datasetIndex": 0,
                "clip": true,
                "zlevel": 0,
                "z": 2,
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "\u5b66\u5386"
                ],
                "selected": {
                    "\u5b66\u5386": true
                },
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "showContent": true,
            "alwaysShowContent": false,
            "showDelay": 0,
            "hideDelay": 100,
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0,
            "padding": 5
        },
        "xAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "\u672c\u79d1",
                    "\u5927\u4e13",
                    "\u7855\u58eb",
                    "\u65e0\u8981\u6c42",
                    "\u4e2d\u4e13",
                    "\u9ad8\u4e2d",
                    "\u535a\u58eb",
                    "\u521d\u4e2d\u53ca\u4ee5\u4e0b",
                    "\u4e2d\u6280"
                ]
            }
        ],
        "yAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "title": [
            {
                "text": "\u7528\u6761\u5f62\u56fe\u89c2\u5bdf\u4e0d\u540c\u5b66\u5386\u5c42\u6b21\u5c97\u4f4d\u9700\u6c42\u6570\u91cf\u60c5\u51b5",
                "padding": 5,
                "itemGap": 10
            }
        ],
        "dataZoom": {
            "show": true,
            "type": "slider",
            "realtime": true,
            "start": 20,
            "end": 80,
            "orient": "vertical",
            "zoomLock": false,
            "filterMode": "filter"
        }
    };
    chart_813d75bf30344937a60a7e3a7b771d81.setOption(option_813d75bf30344937a60a7e3a7b771d81);
</script>
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/dist/js/bootstrap.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/assets/js/vendor/holder.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.36/assets/js/ie10-viewport-bug-workaround.js"></script>
</html>
